<template>
  <div class="mine">
    <!-- 顶部样式 -->
    <div class="topBackground">
      <div class="photo">
        <img :src="facePhoto" />
        <p>{{ realname }}</p>
      </div>
    </div>
    <!-- 头像以及余额 -->
    <div class="user">
      <div class="message">
        <div class="money">
          <p>余额</p>
          <p style="color: #217979">{{ money }}</p>
        </div>
        <div class="pushmoney">
          <van-button type="primary" @click="showTomoney">充值</van-button>
        </div>
      </div>
    </div>
    <!-- 常用地址 -->
    <div class="address">
      <van-cell title="常用地址" icon="location-o" @click="toMyaddress">
        >
      </van-cell>
      <van-cell title="联系我们" icon="phone-circle-o"> > </van-cell>
    </div>
    <van-action-sheet v-model="show" title="充值">
      <van-field v-model="Tomoney" label="充值" placeholder="请输入充值金额" />
      <van-button class="button" type="primary" @click="Pushmoney"
        >充值</van-button
      >
    </van-action-sheet>
    <div class="bt">
      <van-button
        round
        type="primary"
        size="large"
        color="linear-gradient(90deg,#7579ff,#bf73ff)"
        @click="logout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { get, post } from "@/http/axios";
import { Toast, Notify, Dialog } from "vant";
export default {
  methods: {
    async findUser() {
      let res = await get("/user/info", {
        token: localStorage.getItem("token"),
      });
      this.facePhoto = res.data.data.userFace;
      this.money = res.data.data.balance;
      this.customerId = res.data.data.id;
      this.realname = res.data.data.realname;
    },
    async Pushmoney() {
      let params = {
        customerId: this.customerId,
        money: this.Tomoney,
      };
      if (params.money > 1000) {
        Toast.fail("充值金额不得大于1000！");
        return;
      }
      let res = await get("/account/recharge", params);
      this.show = false;
      if (res.data.status === 200) {
        Notify({ type: "success", message: "充值成功" });
      }
      this.findUser();
    },
    toMyaddress() {
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path: "/manager/Myaddress",
        // 参数的传递
        query: {},
      });
    },
    showTomoney() {
      this.show = true;
    },
    logout() {
      Dialog.confirm({
        message: "确认退出？",
      })
        .then(async () => {
          let res = await post("/user/logout");
          Notify({ type: "success", message: res.data.message });
          this.$router.push({
            path: "/Login",
          });
        })
        .catch(() => {
        });
    },
  },
  computed: {
    ...mapState("user", ["token"]),
  },
  data() {
    return {
      facePhoto: "",
      money: "",
      show: false,
      Tomoney: "",
      customerId: "",
      realname: "",
    };
  },
  created() {
    this.findUser();
  },
};
</script>

<style scoped>
.mine {
  height: 568px;
}
.topBackground {
  height: 240px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  text-align: center;
}
.user {
  margin-left: 7%;
  margin-top: -120px;
  background: #fff;
  width: 86%;
  height: 200px;
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
}
.photo {
  margin-top: -40px;
  text-align: center;
  position: relative;
  top: 85px;
  z-index: 9999;
}
.message {
  display: flex;
}
img {
  height: 95px;
  width: 95px;
  border-radius: 50%;
}
.money {
  flex-grow: 1;
  text-align: center;
  margin-top: 100px;
}
.pushmoney {
  flex-grow: 1;
  text-align: center;
  margin-top: 140px;
}
.van-button {
  border-radius: 999px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
}
.address {
  box-shadow: 4px 4px 4px 0 rgb(158 117 255 / 20%);
  margin-top: 50px;
  padding-top: 10px;
  width: 90%;
  margin-left: 5%;
}
.button {
  width: 90%;
  margin-left: 5%;
}
.bt {
  margin-top: 20%;
  text-align: center;
  width: 60%;
  margin-left: 20%;
  align-content: flex-end;
}
</style>